<template>
    <el-scrollbar height="80vh">
        <div v-for="(msg, index) in roomMsgList" :key="index">
            <el-divider>
                <el-text class="mx-1" type="primary">{{ format(new Date(msg.timestamp)) }}</el-text>
            </el-divider>
            <message-item :packet="msg" />
        </div>
    </el-scrollbar>
</template>

<script>
import MessageItem from './MessageItem.vue'
// import {
//     PictureFilled,Search
// } from '@element-plus/icons-vue'
export default {
    components: { MessageItem },
    data() {
        return {
            roomMsgList: []
        }
    },
    methods: {
        receiveRoomMsg(packet) {
            console.log('receiveRoomMsg：', packet);
            this.roomMsgList.push(packet)
        },
        format(dat) {
            //获取年月日，时间
            var year = dat.getFullYear();
            var mon = (dat.getMonth() + 1) < 10 ? "0" + (dat.getMonth() + 1) : dat.getMonth() + 1;
            var data = dat.getDate() < 10 ? "0" + (dat.getDate()) : dat.getDate();
            var hour = dat.getHours() < 10 ? "0" + (dat.getHours()) : dat.getHours();
            var min = dat.getMinutes() < 10 ? "0" + (dat.getMinutes()) : dat.getMinutes();
            var seon = dat.getSeconds() < 10 ? "0" + (dat.getSeconds()) : dat.getSeconds();

            var newDate = year + "-" + mon + "-" + data + " " + hour + ":" + min + ":" + seon;
            return newDate;
        }
    }
}
</script>

<style></style>